@color-picker-panel-width: var(--td-color-picker-panel-width, 375px);
@color-picker-panel-padding: var(--td-color-picker-panel-padding, 16px);
@color-picker-panel-radius: var(--td-color-picker-panel-radius, 12px);
@color-picker-panel-background: var(--td-color-picker-background, #fff);
@color-picker-margin: var(--td-color-picker-margin, 12px);

@color-picker-saturation-height: var(--td-color-picker-saturation-height, 144px);
@color-picker-saturation-radius: var(--td-color-picker-saturation-radius, 6px);
@color-picker-saturation-thumb-size: var(--td-color-picker-saturation-thumb-size, 24px);

@color-picker-slider-height: var(--td-color-picker-slider-height, 8px);
@color-picker-slider-wrapper-radius: calc(@color-picker-slider-height / 2);
@color-picker-slider-wrapper-padding: var(--td-color-picker-slider-wrapper-padding, 0 9px);
@color-picker-slider-thumb-size: var(--td-color-picker-slider-thumb-size, 24px);
@color-picker-slider-thumb-transform-x: var(--td-color-picker-slider-thumb-transform-x, -9px);
@color-picker-slider-thumb-padding: var(--td-color-picker-slider-thumb-padding, 3px);

@color-picker-input-format-margin-left: var(--td-color-picker-input-format-margin-left, 24px);
@color-picker-gradient-preview-width: var(--td-color-picker-gradient-preview-width, 28px);
@color-picker-gradient-preview-height: var(--td-color-picker-gradient-preview-height, 28px);
@color-picker-gradient-preview-radius: var(--td-color-picker-gradient-preview-radius, 3px);

@color-picker-swatches-title-font: var(--td-color-picker-swatches-title-font, 16px);
@color-picker-swatch-width: var(--td-color-picker-swatch-width, 24px);
@color-picker-swatch-height: var(--td-color-picker-swatch-height, 24px);
@color-picker-swatch-padding: var(--td-color-picker-swatch-padding, 0);
@color-picker-swatch-border-radius: var(--td-color-picker-swatch-border-radius, 3px);
@color-picker-swatch-active: var(--td-color-picker-swatch-active, rgba(0, 0, 0, 20%));

@color-picker-thumbs-shadow: @shadow-1;
@color-picker-border-radius-circle: var(--td-color-picker-border-radius-circle, 50%);
@color-picker-format-background-color: var(--td-color-picker-format-background-color, @gray-color-1);

@color-picker: ~"@{prefix}-color-picker";
